<template>
	<view class="hwxcOrderZf-main">
		<view class="hwxcOrderZf-header">
			<uni-tag :text="distributionTypeFilter(orderInfo.distribution_type)" type="error" style="margin-right: 14rpx" size="mini"></uni-tag>
			<view class="pp-title" @click="gotoStore(orderInfo)">
				<text>
					{{ orderInfo.store_id == 0 ? '官方自营' : orderInfo.store.name }}
				</text>
				<uni-icons type="right" size="14" style="margin-left: 6rpx"></uni-icons>
			</view>
			<view class="types">
				{{ orderInfoStatus(orderInfo.status, orderInfo.distribution_state) }}
			</view>
		</view>
		<view class="hwxcOrderZf-content" v-for="(item, index) in orderInfo.goods_info" :key="index" @click="gotoPath(orderInfo.id)">
			<view class="hwxcOrderZf-image">
				<image :src="imageUrls(item.fileUrl)" class="images"></image>
			</view>
			<view class="hwxcOrderZf-info">
				<view class="">
					{{ item.name }}
				</view>
				<view style="font-size: 26rpx; color: #999">规格:{{ item.spec }}</view>
			</view>
			<view class="hwxcOrderZf-pri">
				<view class="Price">
					￥
					<text style="font-size: 32rpx">{{ item.total_price }}</text>
				</view>
				<view class="num">共{{ item.buy_num }}件</view>
			</view>
		</view>
		<view class="orderInfos">
			<view class="order_no">
				<text style="color: #999;">订单编号</text>
				<text>
					{{orderInfo.order_no}}
					<text class="copy" @click="copyText(orderInfo.order_no)">复制</text>
				</text>
			</view>
			<view class="order_createtime">
				<text style="color: #999;">下单时间</text>
				<text>
					{{formatTimestamps(orderInfo.createtime)}}
				</text>
			</view>
		</view>
		<view class="hwxcOrderZf-btn">
			<button class="mini-btn" type="default" size="mini" @click="getuserDelOrder(orderInfo.id)" v-if="orderInfo.status == 2 || orderInfo.status == 3">删除订单</button>
			<button class="mini-btn" type="default" size="mini" @click="getuserCancelOrder(orderInfo.id)" v-if="orderInfo.status == 0">取消订单</button>
			<button class="mini-btn" type="warn" size="mini" v-if="orderInfo.status == 0">去支付</button>
			<button class="mini-btn" type="warn" size="mini" v-if="orderInfo.status == 2" @click="getRepurchase(orderInfo)">重新购买</button>
			<button class="mini-btn" type="default" size="mini" v-if="orderInfo.status == 1" @click="contactBusiness(orderInfo)">联系商家</button>
			<button class="mini-btn" type="warn" size="mini" v-if="orderInfo.status == 1">确认收货</button>
			
			<!-- v-if="orderInfo.status == 5" -->
			<button class="mini-btn" type="warn" size="mini"  @click="gotoRefund(orderInfo.id)">申请售后</button>
			<button class="mini-btn" type="warn" size="mini"  @click="lookRefund(orderInfo.id)">查看售后</button>
		</view>
	</view>
</template>

<script>
import { userDelOrder, userCancelOrder } from '../../api/order/index.js';
import { imageUrl,formatTimestamp } from '../../utils/tools.js';
export default {
	name: 'hwxcOrderZf',
	data() {
		return {};
	},
	props: {
		// 订单详情
		orderInfo: {
			type: Object,
			default: () => {}
		}
	},
	methods: {
		// 订单状态
		orderInfoStatus(val, type) {
			// 发货状态
			// 0=待发货,1=待配送,2=已发货,3=配送中,4=待确认收货,5=已完成
			if (val == 1) {
				const deliverGoodsList = {
					0: '待发货',
					1: '待配送',
					2: '已发货',
					3: '配送中',
					4: '待收货',
					5: '已完成'
				};

				return deliverGoodsList[type];
			}
			
			// 支付状态
			const playMap = {
				0: '待付款',
				1: '已支付',
				2: '已失效',
				3: '已取消'
			};
			return playMap[val];
		},

		gotoPath(id) {
			uni.navigateTo({
				url: `/pages/orderInfo/orderInfo?id=${id}`
			});
		},
		
		gotoStore(info){
			if(!info.store_id){
				return uni.showToast({
					title:'官方店铺暂不开通',
					icon:'none'
				})
			}
			
			if (info.store.lng && info.store.lat) {
				uni.navigateTo({
					url: `/pages/storeShop/storeShop?store_id=${info.store_id}&type=1&lng=${info.store.lng}&lat=${info.store.lat}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/storeShop/storeShop?store_id=${info.store_id}&type=0`
				});
			}
		},

		// 配送方式过滤
		distributionTypeFilter(status) {
			const statusMap = {
				0: '快递配送',
				1: '到店自提',
				2: '送货上门'
			};
			return statusMap[status];
		},

		// 删除订单
		async getuserDelOrder(id) {
			try {
				const resData = await userDelOrder({
					id
				});
				if (resData.code == 1) {
					uni.showToast({
						title: '删除成功',
						icon: 'success'
					});
					this.$emit('refreshOrderList');
				} else {
					uni.showToast({
						title: resData.msg,
						icon: 'none'
					});
				}
			} catch (e) {
				throw Error(e);
			}
		},

		imageUrls(fileUrl) {
			return imageUrl(fileUrl);
		},
		
		// 时间格式化
		formatTimestamps(timestamp) {
			return formatTimestamp(timestamp);
		},

		// 联系商家
		contactBusiness(info) {
			if (info.store.contact_phone) {
				uni.makePhoneCall({
					phoneNumber: info.store.contact_phone
				});
			} else {
				uni.showToast({
					title: '请勿打扰',
					icon: 'none'
				});
			}
		},

		// 取消订单
		async getuserCancelOrder(id) {
			try {
				uni.showModal({
					title: '提示',
					content: '是否要取消当前订单？',
					success: async (res) => {
						if (res.confirm) {
							const resData = await userCancelOrder({
								id
							});
							if (resData.code == 1) {
								uni.showToast({
									title: '取消成功',
									icon: 'success'
								});
								this.$emit('refreshOrderList');
							} else {
								uni.showToast({
									title: resData.msg,
									icon: 'none'
								});
							}
						}
					}
				});
			} catch (e) {
				throw Error(e);
			}
		},

		// 重新下单
		async getRepurchase(info) {
			// 删除订单
			await userDelOrder({
				id: info.id
			});

			let orderListArr = [];
			info.goods_info.forEach((item) => {
				orderListArr.push({
					id: item.info.id,
					num: item.num
				});
			});

			// 清空购物车缓存
			this.$store.commit('clearCartShopList');

			// 勾选的商品
			this.$store.dispatch('getCartShopListAsync', orderListArr);

			// 云店或者闪电送
			uni.navigateTo({
				url: `/pages/submitOrder/submitOrder?type=${info.type}`
			});
		},
		
		// 复制
		async copyText(text) {
			try {
				await uni.setClipboardData({
					data: text
				});
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 1500
				});
			} catch (e) {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
					duration: 1500
				});
			}
		},
		
		gotoRefund(id){
			uni.navigateTo({
				url:`/pages/refund/refund?id=${id}`
			})
		},
		
		lookRefund(id){
			uni.navigateTo({
				url:`/pages/refundDetails/refundDetails?id=${id}`
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.hwxcOrderZf-main {
	background-color: #fff;
	box-sizing: border-box;
	padding: 30rpx;
	border-radius: 24rpx;
	font-size: 26rpx;
	padding-top: 0px;
	margin-bottom: 20rpx;
	.hwxcOrderZf-header {
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px #f3f3f3 solid;
		.pp-title {
			flex: 1;
			font-weight: bold;
			font-size: 26rpx;
		}
		.types {
			width: 240rpx;
			text-align: right;
			color: #e43927;
			font-size: 26rpx;
			font-weight: bold;
		}
	}

	.hwxcOrderZf-content {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx 0px;
		border-bottom: 1px #f3f3f3 solid;
		.hwxcOrderZf-image {
			width: 160rpx;
			.images {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
			}
		}
		.hwxcOrderZf-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 140rpx;
		}
		.hwxcOrderZf-pri {
			width: 200rpx;
			text-align: right;
			.Price {
				font-size: 24rpx;
				font-weight: bold;
				margin-bottom: 4rpx;
			}
			.num {
				color: #999;
			}
		}
	}
	
	.orderInfos{
		margin-top: 20rpx;
		color: #444;
		.order_no{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15rpx;
			.copy {
				display: inline-block;
				padding: 8rpx 18rpx;
				border-radius: 24rpx;
				background-color: #f3f3f3;
				margin-left: 12rpx;
				font-size: 24rpx;
			}
		}
		
		.order_createtime{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.hwxcOrderZf-btn {
		text-align: right;
		padding-top: 35rpx;
		.mini-btn {
			margin-left: 20rpx;
		}
	}
}
</style>
